<link href="/static/new/css/bootstrap.min.css" rel="stylesheet">
<script src="/static/new/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	 // $(".table-bordered").hide();
    // $("#websocket_rest").remove();
	if(!("WebSocket" in window)){
		$('#chatLog, input, button, #examples').fadeOut("fast");
		$('<p>Oh no, you need a browser that supports WebSockets. How about <a href="http://www.google.com/chrome">Google Chrome</a>?</p>').appendTo('#container');
	}else{
		//The user has WebSockets

	connect();

	function connect(){
			var socket;
			var host = "ws://{{ web_socket }}/?jid={{ uid }}";
			// var host = "ws://192.168.50.99:8001/websocket";

			try{
				var socket = new WebSocket(host);
				message('<p class="event">Socket Status: '+socket.readyState);
				socket.onopen = function(){
					message('<p class="event">Socket Status: '+socket.readyState+' (open)');
				}

				socket.onmessage = function(msg){
					message('<p class="message">Received: '+msg.data);
				}

				socket.onclose = function(){
					message('<p class="event">Socket Status: '+socket.readyState+' (Closed)');
				}

			} catch(exception){
				message('<p>Error'+exception);
			}



			function message(msg){
				$('#chatLog').append(msg+'</p>');
			}//End message()

			$('#text').keypress(function(event) {
					  if (event.keyCode == '13') {
						 send();
					   }
			});

			$('.monitor').click(function(){
				socket.close();
			});

		}


	}//End connect()

});
</script>
<style>
    .voilet_websocket{border:solid 1px #279048;}
</style>
<div class="col-md-12 column voilet_websocket">
            <div id="chatLog">

        </div>
    </div>